<template>
  <div class="basket">
    <p v-if="!$store.state.list.length">暂无菜单</p>

    <ul class="menu-list">
      <li
        v-for="(d, i) in $store.state.list"
        :key="d.name"
      >
        <h4>{{ d.name }}</h4>
        <div class="btn-list">
          <button @click="showItemModal(i)">+添加用料</button>
          <button @click="$store.commit('delMenu', i)">删除这个清单</button>
        </div>

        <!-- todo：这里需要组件 -->
        <item-list
          :list="d.items"
          @toggle="toggle(i, $event)"
        />

      </li>
    </ul>

    <button class="add" @click="$store.commit('setShowMenu', true)">+</button>

    <menu-modal />
    <item-modal />
  </div>
</template>

<script>
import MenuModal from "./MenuModal.vue";
import ItemModal from "./ItemModal.vue";
import ItemList from "./ItemList.vue";
import { getVal, setVal} from '@/views/basket-vuex/storage.js';
export default {
  components: { MenuModal, ItemModal, ItemList },
  watch: {
    '$store.state.list': {
      deep: true,
      handler(newList) {
        setVal(newList);
        console.log(' list变化了')
      }
    }
  },
  created() {
    this.$store.commit('setList', getVal());
  },
  methods: {
    // i菜的下标，j配料的下标
    toggle(i, name) {
      // const j = this.list[i].items.findIndex(item => item.name === name);
      // this.list[i].items[j].done = !this.list[i].items[j].done;
      this.$store.commit('toggleItem', {i, name});
      // this.$store.commit('toggleItem', i, name);
    },
    showItemModal(index) {
      this.$store.commit('setIndex', index);
      this.$store.commit('setShowItem', true);
    },
  }
};
</script>

<style lang="sass">
.basket
  width: 400px
  height: 500px
  margin: 0 auto
  background: #f0f0f0
  border: 1px solid #999
  position: relative
  padding: 20px
  .add
    position: absolute
    bottom: 30px
    right: 30px
    border-radius: 50%
    width: 40px
    height: 40px
    background: #ff9900
    color: #fff
    font-size: 28px
    text-align: center
  .btn-list button
    margin-right: 10px
    border: 1px solid #ccc
    border-radius: 3px
    padding: 2px 5px
</style>
